<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" />
		<title>main</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="css/photoswipe.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.css" />
		<link rel="stylesheet" type="text/css" href="css/main_R.css" />
		<link rel="stylesheet" type="text/css" href="Video/videohls/video.css">
		<style>
			.video-controls {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background: rgba(0, 0, 0, .4);
				z-index: 1;
				height: 100%;
			}
			
			.video-controls .icon {
				color: white;
				float: right;
			}
			
			.icon-bigbtn {
				position: absolute;
				font-size: 2.5em;
				height: 1.5em;
				width: 1.5em;
				border-radius: 1.5em;
				line-height: 1.4em;
				left: 50%;
				margin-left: -.75em;
				top: 50%;
				margin-top: -.75em;
				z-index: 9;
			}
			
			.icon-bigbtn img {
				width: 100%;
				height: 100%
			}
			
			.video-js .vjs-time-control {
				display: block;
			}
			
			.video-js .vjs-remaining-time {
				display: none;
			}
			
			#hui-back:before {
				content: "\e6a5";
				font-size: 15px;
				color: #464646;
			}
			
			
			
			
			
			#hui-transparent-mask {
				background: rgba(0,0,0,0.4) !important;
			}
			
			
			
			
			.mui-card{
				
			}
			.base_index_list {
			  display: flex;
			  flex-wrap: wrap;
			}
			.base_index_list li {
			  width: 45%;
			  height: 80px;
			  background: #fff;
			  border-radius: 5px;
			  margin: 15px 0 0 3.3%;
			  display: flex;
			  flex-wrap: wrap;
			  position: relative;
			}
			.base_index_list li .base_index_name {
			  width: 65%;
			  height: 100%;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			}
			.base_index_list li .base_index_name .name {
			  /*line-height: 30px;*/
			 box-sizing: border-box;
			 padding: 8px 0 0 0;
			  color: #606060;
			  text-align: center;
				word-break:normal;
				white-space:pre-warp;
				word-wrapL:break-word;
				height: 30%;
			}
			.base_index_list li .base_index_name .unit {
			  font-size: 16px;
			  line-height: 36px;
			  color: #255ca9;
			}
			.base_index_list li .base_index_icon {
			  width: 35%;
			  height: 100%;
			  display: flex;
			  align-items: center;
			}
			.base_index_list li .base_index_icon img {
			  width: auto;
			  height: 70%;
			  margin-top: 15px;
			}
			.base_index_list li:last-child {
			  width: 100%;
			  height: 5px;
			  background: rgba(0, 0, 0, 0);
			}
			.base_index_list li .errorTips{
				height: 20px; 
				width: 100%; 
				display: none;
				background: rgba(0,0,0,.5); 
				position: absolute; 
				bottom: 0px; 
				left: 0;
			}
			.base_index_list li .errorTips p{
				line-height: 20px; 
				text-align: center; 
				font-size: 14px; 
				color: #fff;
			}
			

			.item_div {
				height: 60px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			
			.item_div img {
				width: 24px;
				height: 24px
			}
			
			
			.item_box_p1 {
				line-height: 60px;
				padding-left: 10px;
				color: #666666;
			}
			
			.item_box_p2 {
				line-height: 60px;
				flex-grow: 1;
				text-align: right;
				padding-right: 10px;
				color: #666666;
			}
			.item_box_p2 .active{
				border: 1px solid #000;
			}
			.item_box_p2 .cur{background:#06c;color:#fff;}
			.hui-icons {
				color: #666666;
			}
			.hui-slide-menu li {
				height: auto;
			}
			.mui-table-view-cell.mui-active {
			    background-color: #fff;
			}
			.baseClass{
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: left;
				display: flex;
				border-bottom: 1px solid #efefef;
			}
			.baseClass p{
				width: 66%;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
			.mui-table-view:after { 
				background-color:#fff;
			}
			.mui-table-view-cell:after {
				height:0;
			}
			.mui-table-view-cell {
			    /* padding: 11px 0px 0 10px; */
			}	
		</style>
	</head>

	<body>
		<div id="datas" class="hui-wrap">
			<div class="topHeight"></div>

			<div class="info_nav">
				<span class="hui-icons hui-icons-menu" onclick="showMenu()" style=""></span>
				<h2 class="base_name" style=""></h2>
				<div class="user_head" style="" onclick="openSetting()">
					<img src="img/head_icon.png" alt="" style="" />
				</div>
			</div>

			<div class="topBanner" style="">
				<div id="swipe_Con" style="">
					<div class="swiper-container" style="">
						<div class="swiper-wrapper">

						</div>

					</div>
				</div>
				<div id="video_Con" style="">
					<!--<img id="play_Button" src="img/play_button.png" alt="" />
					<img id="video_Cover" src="img/videoFile.png" alt="" />-->

					<!--<video id="my-video" class="video-js vjs-default-skin" controls preload></video>-->

					<!--<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
	    
					</video>-->
					<div class="video-controls" id="videobg">
						<img id="video_Cover" src="img/videoFile.png" alt="" />
						<span class="icon iconfont icon-bofang icon-bigbtn" id="videoplay">		
							<img id="play_Button" src="img/play_button.png" alt="" />
						</span>
					</div>
				</div>
				<section class="ImgVideoTab" style="">
					<span class="Video_Button">视　频</span>
					<span class="Img_Button active">图　片</span>
					<span class="Base_Position">位　置</span>
					<span class="Krpano" >全　景</span>
				</section>
				<span class="ImgNum"><span class="ImgIndex">1</span> / <span class="ImgTotal">4</span></span>
			</div>

			<!---->
			<div class="base_index" style="margin: 0;">
		    	<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse mui-active" v-for="accordion in accordionList">
						<a class="mui-navigate-right" href="#" v-html="accordion" style="font-size: 18px;"></a>
						<div class="mui-collapse-content">
							<ul class="base_index_list">
				                <li v-for="detail in list" @click="onDetailSelected(detail)" v-if="detail.controlType!='control'&&detail.controlType!='switch'" style="width: 46%; margin: 10px 2%; border: 1px solid #000; float: left;">
									<div class="base_index_name" style="">
										<p class="name" v-html="detail.powertargetname" style=""></p>
										<p style="color: #606060;height: 25%; padding: 0 0 0 0;"></p>
										<p class="unit" v-text="getValue(detail)" style=""></p>
									</div>
									<div class="base_index_icon" style="">
										<img :src="getIcon(detail)" alt="" style="" />
									</div>
									<div :class="getErrorTips(detail.State)" style="">
										<p style="">指标数据异常</p>
									</div>
								</li>
								<li style=""></li>
				            </ul>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse mui-active" v-for="accordion in 1" v-if="equipmentList.length!=0" style="border-top: 1px solid #e2e2e2;">
						<a class="mui-navigate-right" href="#" style="font-size: 18px;">设备控制</a>
						<div class="mui-collapse-content">
							<template v-for="(column,index) in equipmentList">
								<div class="item_div">
									<p class="item_box_p1"style="width: 130px;">{{column.powertargetname}}</p>
									<div class="item_box_p2" v-html="getSwitchBox(column)">
			
									</div>
								</div>
							</template>
						</div>
					</li>
					<li class="mui-table-view-cell" v-if="equipmentList.length!=0" @click="ControlsV(1)" style="border-top: 1px solid #e2e2e2;">
						<a class="mui-navigate-right" href="#" style="font-size: 18px;">计划列表</a>
						<div class="mui-collapse-content">
						        
						</div>
					</li>
				</ul>
		    </div>
			<!--<div class="base_index" style="">

				<div class="base_index_container" style="">
					<ul class="base_index_list" style="">
						<li v-for="detail in list" @click="onDetailSelected(detail)" style="">

							<div class="base_index_name" style="">
								<p class="name" v-html="HandleName(detail.TargetName)" style=""></p>
								<p style="color: #606060;height: 25%; padding: 8px 0 0 0;" v-html="HandleName2(detail.TargetName)"></p>
								<p class="unit" v-text="getValue(detail)" style=""></p>
							</div>

							<div class="base_index_icon" style="">
								<img :src="getIcon(detail)" alt="" style="" />
							</div>
							<div :class="getErrorTips(detail.State)" style="">
								<p style="">指标数据异常</p>
							</div>
						</li>
						<li style=""></li>
					</ul>
				</div>
				<div class="sureserve" style="">sensor@sureserve.cn</div>
			</div>-->

			<!--侧边菜单栏-->
			<div class="hui-slide-menu" style="">
				<ul style="height: 100%;">
					<li style="height: 32px;line-height: 28px;" v-if="mapopenstate == 'true'">
						<div class="backBtn" id="hui-back" style="width: 100%; height: 100%; line-height: 28px;">
							<i style="line-height: 24px; color: #464646;">返回</i>
						</div>
					</li>
					<li style="height: 36px;line-height: 28px;border-bottom: 0;font-size: 22px;">
						<div class="shiName" style="width: 100%;height: 100%;line-height: 36px;border-bottom: 0;font-weight: 700;font-family: Microsoft YaHei;text-align: left;"></div>
					</li>
					<li style="height: calc(100% - 84px);overflow: auto;">
						<ul class="mui-table-view"  style="height: 100%; padding: 0;">
							<li class="mui-table-view-cell mui-collapse mui-active" v-for="accordion in xianColumns" style="padding-left: 0px;padding-right: 0;">
								<a class="mui-navigate-right" href="#" v-html="accordion.key+'('+accordion.count+')'" style="font-size: 16px;color: #595959;font-weight: 700;font-family: Microsoft YaHei;text-align: left;margin-left: 0px;padding: 0px;border-bottom: 1px solid rgb(204, 204, 204);height: 36px;line-height: 36px;"></a>
								<div class="mui-collapse-content">
									<template v-for="(column,index) in columns" v-if="accordion.key!='其他'&&column.areaname == accordion.key">
										<div :class="getLeftClass(index,column.powerid,column.powername,column.lat,column.lng)" @click="onColumnSelected(column,index)">
											<p>{{column.powername}}</p>
											<img src="img/icon_monitor.png" alt="" v-if="column.videoList.length!=0" style="width: 19px;height: 20px;margin-top: 8px;margin-right: 5px;">
											<img src="img/icon_plan.png" alt="" v-if="column.controlTargetList.length!=0" style="width: 19px;height: 21px;margin-top: 8px;margin-right: 2px;">
											<img src="img/icon_panorama.png" alt="" v-if="column.powername.indexOf('耘园大棚')!=-1||loginName=='耘园大棚'||loginName=='陈益能'" style="width: 23px;height: 24px;margin-top: 6px;">
										</div>
									</template>
									
									<template v-for="(column,index) in columns" v-if="accordion.key=='其他' && column.areaname==''">
										<div :class="getLeftClass(index,column.powerid,column.powername,column.lat,column.lng)" @click="onColumnSelected(column,index)">
											<p>{{column.powername}}</p>
											<img src="img/icon_monitor.png" alt="" v-if="column.videoList.length!=0" style="width: 19px;height: 20px;margin-top: 8px;margin-right: 5px;">
											<img src="img/icon_plan.png" alt="" v-if="column.controlTargetList.length!=0" style="width: 19px;height: 21px;margin-top: 8px;margin-right: 2px;">
											<img src="img/icon_panorama.png" alt="" v-if="column.powername.indexOf('耘园大棚')!=-1||loginName=='耘园大棚'||loginName=='陈益能'" style="width: 23px;height: 24px;margin-top: 6px;">
										</div>
									</template>
								</div>
							</li>
						</ul>
					</li>
					<!--  -->
					<!-- <li v-for="(column,index) in columns" style="">
						<div :class="getLeftClass(index,column.powerid,column.powername,column.lat,column.lng)" @click="onColumnSelected(column,index)">
							<div :class="getStateBGC(0)"></div>
							<b v-html="getState(0)" :class="getStateBGC(0)"></b>
							<p style="">{{column.powername}}</p>
						</div>
					</li> -->
					<li style="height: 22px; border: 0;"></li>
				</ul>
			</div>
			<div id="mask" style="display: none;" onclick="hideMenu()"></div>
		</div>

		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="pswp__bg"></div>
			<div class="pswp__scroll-wrap">
				<div class="pswp__container" style="overflow:visible;">
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
				</div>
				<div class="pswp__ui pswp__ui--hidden">
					<div class="pswp__top-bar">
						<div class="pswp__counter"></div>
						<button class="pswp__button pswp__button--close" title="关闭"></button>
						<div class="pswp__preloader">
							<div class="pswp__preloader__icn">
								<div class="pswp__preloader__cut">
									<div class="pswp__preloader__donut"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
						<div class="pswp__share-tooltip"></div>
					</div>
					<div class="pswp__caption">
						<div class="pswp__caption__center"></div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/func/hui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/hui-accordion.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/photoswipe.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/my.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/update.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/swiper.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			var cityName = getValue("cityName");
			
			var shiJson={
			  	"1825": {
				    "1826": "长沙",
				    "1836": "株洲",
				    "1846": "湘潭",
				    "1852": "衡阳",
				    "1865": "邵阳",
				    "1878": "岳阳",
				    "1888": "常德",
				    "1898": "张家界",
				    "1903": "益阳",
				    "1910": "郴州",
				    "1922": "永州",
				    "1934": "怀化",
				    "1947": "娄底",
				    "1953": "湘西"
			  	},
			  	"3121": {
				    "3122": "乌鲁木齐",
				    "3131": "克拉玛依",
				    "3136": "吐鲁番",
				    "3140": "哈密",
				    "3144": "昌吉",
				    "3152": "博尔塔拉",
				    "3156": "巴音郭楞",
				    "3166": "阿克苏",
				    "3176": "克孜勒苏",
				    "3181": "喀什",
				    "3194": "和田",
				    "3203": "伊犁",
				    "3214": "塔城",
				    "3222": "阿勒泰",
				    "3230": "石河子",
				    "3232": "阿拉尔",
				    "3234": "图木舒克",
				    "3236": "五家渠"
			  	},
  			};
			var xianJson = {
				"1826": {
				  "1827": "芙蓉区",
				  "1828": "天心区",
				  "1829": "岳麓区",
				  "1830": "开福区",
				  "1831": "雨花区",
				  "1832": "长沙县",
				  "1833": "望城区",
				  "1834": "宁乡县",
				  "1835": "浏阳市"
				},
				"1836": {
					"1837": "荷塘区",
					"1838": "芦淞区",
					"1839": "石峰区",
					"1840": "天元区",
					"1841": "株洲县",
					"1842": "攸县",
					"1843": "茶陵县",
					"1844": "炎陵县",
					"1845": "醴陵市"
				},
				"1846": {
					"1847": "雨湖区",
					"1848": "岳塘区",
					"1849": "湘潭县",
					"1850": "湘乡市",
					"1851": "韶山市"
				},
				"1852": {
					"1853": "珠晖区",
					"1854": "雁峰区",
					"1855": "石鼓区",
					"1856": "蒸湘区",
					"1857": "南岳区",
					"1858": "衡阳县",
					"1859": "衡南县",
					"1860": "衡山县",
					"1861": "衡东县",
					"1862": "祁东县",
					"1863": "耒阳市",
					"1864": "常宁市"
				},
				"1865": {
					"1866": "双清区",
					"1867": "大祥区",
					"1868": "北塔区",
					"1869": "邵东县",
					"1870": "新邵县",
					"1871": "邵阳县",
					"1872": "隆回县",
					"1873": "洞口县",
					"1874": "绥宁县",
					"1875": "新宁县",
					"1876": "城步苗族自治县",
					"1877": "武冈市"
				},
				  "1878": {
					"1879": "岳阳楼区",
					"1880": "云溪区",
					"1881": "君山区",
					"1882": "岳阳县",
					"1883": "华容县",
					"1884": "湘阴县",
					"1885": "平江县",
					"1886": "汨罗市",
					"1887": "临湘市"
				  },
				  "1888": {
					"1889": "武陵区",
					"1890": "鼎城区",
					"1891": "安乡县",
					"1892": "汉寿县",
					"1893": "澧县",
					"1894": "临澧县",
					"1895": "桃源县",
					"1896": "石门县",
					"1897": "津市市"
				  },
				  "1898": {
					"1899": "永定区",
					"1900": "武陵源区",
					"1901": "慈利县",
					"1902": "桑植县"
				  },
				  "1903": {
					"1904": "资阳区",
					"1905": "赫山区",
					"1906": "南县",
					"1907": "桃江县",
					"1908": "安化县",
					"1909": "沅江市"
				  },
				  "1910": {
					"1911": "北湖区",
					"1912": "苏仙区",
					"1913": "桂阳县",
					"1914": "宜章县",
					"1915": "永兴县",
					"1916": "嘉禾县",
					"1917": "临武县",
					"1918": "汝城县",
					"1919": "桂东县",
					"1920": "安仁县",
					"1921": "资兴市"
				  },
				  "1922": {
					"1923": "零陵区",
					"1924": "冷水滩区",
					"1925": "祁阳县",
					"1926": "东安县",
					"1927": "双牌县",
					"1928": "道县",
					"1929": "江永县",
					"1930": "宁远县",
					"1931": "蓝山县",
					"1932": "新田县",
					"1933": "江华瑶族自治县"
				  },
				  "1934": {
					"1935": "鹤城区",
					"1936": "中方县",
					"1937": "沅陵县",
					"1938": "辰溪县",
					"1939": "溆浦县",
					"1940": "会同县",
					"1941": "麻阳苗族自治县",
					"1942": "新晃侗族自治县",
					"1943": "芷江侗族自治县",
					"1944": "靖州苗族侗族自治县",
					"1945": "通道侗族自治县",
					"1946": "洪江市"
				  },
				  "1947": {
					"1948": "娄星区",
					"1949": "双峰县",
					"1950": "新化县",
					"1951": "冷水江市",
					"1952": "涟源市"
				  },
				  "1953": {
					"1954": "吉首市",
					"1955": "泸溪县",
					"1956": "凤凰县",
					"1957": "花垣县",
					"1958": "保靖县",
					"1959": "古丈县",
					"1960": "永顺县",
					"1961": "龙山县"
				  },
				  "3136": {
				    "3137": "吐鲁番市",
				    "3138": "鄯善县",
				    "3139": "托克逊县"
				  },
			}; 

			function showMenu() {
				hui('.hui-slide-menu').css({
					display: 'block',
					top: '20px'
				});
				hui('#mask').css({
					display: 'block'
				});
			}

			function hideMenu() {
				hui('.hui-slide-menu').css({
					display: 'none'
				});
				hui('#mask').css({
					display: 'none'
				});
			}

			//刷新主界面
			function refresh() {
				printLog("主界面开始刷新");
				datas.userInfo = getUserInfo();
				getColumns();
			}
			//刷新网管列表
			function refreshColumns() {
				printLog("刷新网关列表");
				getColumns();
			}
			var mySwiper
			var SwiperNum = 1;

			function initSwiper() {
				mySwiper = new Swiper('.swiper-container', {

					loop: false,
					pagination: {
						el: '.swiper-pagination',
					},
					noSwiping: true,
					on: {
						slideChangeTransitionEnd: function() {
							//alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
							hui('.ImgIndex').html(this.activeIndex + 1);
						},
					},
				})
				SwiperNum++;
			}

			hui.ready(function() {
				//轮播图控制
				initSwiper();
				//默认第一次调用基地数据请求 
				getColumns();
				hui.plusReady(function() {
					//localStorage.getItem('upDateTips') ? '' : checkUpdate(true);
					if(localStorage.getItem('upDateTips')){
						
					}else{
						checkUpdate(true);
					}
					
				})

			})
			//var Sensor_Name = ''
			var myPlayer, IsPlay = true;
			var datas = new Vue({
				el: '#datas',
				data: {
					userInfo: getUserInfo(),
					loginName: localStorage.getItem("loginName"),
					mapopenstate: localStorage.getItem("mapopenstate"),
					Sensor_Name: '',
					accordionList: [],
					xianColumns: [],
					columns: [],
					list: [],
					equipmentList: [],
					ImgContainer: [],
					VideoContainer: [],
					selectListIndex: 0,
				},
				methods: {
					//选中左侧基地
					onColumnSelected: function(column, index) {
						console.log('===========' + column);
						this.selectListIndex = index;
						getSensorList(column);
					},
					//左侧基地选中class
					getLeftClass: function(index, columnId, columnName, Lat, Lng) {
						
						if(this.selectListIndex == index) {
							//存入当前基地位置  打开基地位置页面后 让当前基地居中
							localStorage.setItem('columnLat', Lat);
							localStorage.setItem('columnLng', Lng);

							Sensor_Base = columnId;
							this.Sensor_Name = columnName;
							/* console.log("左边列表选中Id:" + Sensor_Base);
							console.log("左边列表选中的基地名字是:" + this.Sensor_Name); */
							hideMenu();
							console.log(this.Sensor_Name.indexOf('耘园大棚'));
							hui('.base_name').html(this.Sensor_Name);
							console.log(localStorage.getItem("loginName"))
							if(this.Sensor_Name.indexOf('耘园大棚') != -1 || localStorage.getItem("loginName") == "耘园大棚" || localStorage.getItem("loginName") == '陈益能'){
								$('.Krpano').show();
							}else{
								$('.Krpano').hide();
							}
							
						}
						//return index == this.selectListIndex ? "baseClass selected" : "baseClass";
						if(index == this.selectListIndex){
							return "baseClass selected"
						}else{
							return "baseClass"
						}
					},
					getState: function(state) {
						//return state == 0 ? "正常" : state == -1 ? "缺电" : state == 1 ? "延时" : state;
						if(state == 0){
							return "正常"
						}else if(state == -1){
							return "缺电"
						}else if(state == 1){
							return "延时"
						}else{
							return state;
						}
					},
					getStateBGC: function(state) {
						//return state == 0 ? "cur0" : state == -1 ? "cur-1" : state == 1 ? "cur1" : state;
						if(state == 0){
							return "cur0"
						}else if(state == -1){
							return "cur-1"
						}else if(state == 1){
							return "cur1"
						}else{
							return state;
						}
					},
					getErrorTips: function(state) {
						//return state == 0 ? "errorTips" : "errorTips block";
						if(state == 0){
							return "errorTips"
						}else{
							return "errorTips block"
						}
					},
					onDetailSelected: function(detail) {
						console.log(detail)
						console.log(JSON.parse(localStorage.getItem('detailColumn')));
						
						var  detailColumn = JSON.parse(localStorage.getItem('detailColumn'));
						console.log(detailColumn)
						var url = "main_New_Detail.html?powerid=" + detailColumn.powerid;
						url += "&targetcode=" + detail.targetcode;
						url += "&name=" + detail.powertargetname;
						url += "&unit=" + detail.targetTypeUnit;
						url += "&base=" + detailColumn.powerid;
						url += "&sensorN=" + detailColumn.powername;
						console.log(url);
						hui.open(encodeURI(url), {}, true, {});
					},
					// 获取头像
					getHead: function() {
						console.log('header:' + JSON.stringify(this.userInfo));
						var avatar = ""
						if(this.userInfo && this.userInfo.avatar) {
							avatar = baseURL() + this.userInfo.avatar;
						} else {
							avatar = "img/head_icon.png";
						}
						return avatar;
					},
					//获得右侧指标图标
					getIcon: function(column) {
						var icon = newBaseUrl() + column.targetTypeIcon;
						return icon;
					},
					getValue: function(detail) {
						return detail.targetData + ' ' + detail.targetTypeUnit;
					},
					getSwitchBox: function(column) {
						var html = '';	
						var open = 'open', stop = 'stop', close = 'close';
						if(column.controlType == 'control' || column.controlType == 'switch' || column.controlType == 'Control' || column.controlType == 'Switch'){
							for(var i = 0; i < column.controlList.length; i++) {
								if(column.controlList[i].controlCode == column.controlState){
									html += '<button type="button" style="margin: 0 2px;" class="hui-button hui-button-small hui-fl cur" data-targetcode="'+column.targetcode+'" data-controlState="'+column.controlList[i].controlCode+'" onclick="Controls(this)">'+column.controlList[i].controlName+'</button>';
								}else{
									html += '<button type="button" style="margin: 0 2px;" class="hui-button hui-button-small hui-fl" data-targetcode="'+column.targetcode+'" data-controlState="'+column.controlList[i].controlCode+'" onclick="Controls(this)">'+column.controlList[i].controlName+'</button>';
								}
							}
						}
						return html;
					},
					ControlsV: function(type){
						var userId = localStorage.getItem("loginId");
						var url = "./plan/plan_list.html?pid=" + Sensor_Base + "&uid=" + userId;
						hui.open(url, {}, true, {})
						//hui.open("./plan/plan_condition.html?powerid=" + Sensor_Base + "&uid=" + userId, {}, true, {})
					},
				}
			})

			function Controls(that, state){
				//console.log($(that))
				var tipText = '您确定要' + $(that).text() + $(that).parents('.item_box_p2').siblings('.item_box_p1').text() + '吗？';
				
				//$(that).addClass('active').siblings('butten').removeClass('active');
				hui.confirm(tipText, ['取消','确定'], function(){
				 	var url = newBaseUrl() + "/control/targetcontrol?targetcode=" + $(that).attr('data-targetcode') + "&controlstate=" + $(that).attr('data-controlState');
			        $.get(url, function(res){
						console.log(JSON.stringify(res));
						//var result = JSON.parse(res);
						var result = res;
						if(result.code == 'Control0102'){
							hui.alert(result.msg);
							return false;
						}
						if(result.result == 'ok'){
							targetStatenum = 1;
							targetState($(that).attr('data-controlState'), that)
							hui.loading('连接服务器成功，正在操作中，请稍等...');
						}
					})	
			    },function(){
			        hui.toast('取消操作');
			    });
			}
			
			var targetStatenum = 1;
			function targetState(State, that) {
				hui.loading('连接服务器成功，正在操作中，请稍等...');
				setTimeout(function(){
					var url = newBaseUrl() + "/control/gettargetcontrolstate?targetcode=" + $(that).attr('data-targetcode');
					
					console.log(State);
					$.get(url, function(res){
						//var result = JSON.parse(res);
						var result = res;
						console.log(JSON.stringify(res));
						if(State == result.result){
							hui.closeLoading();
							$(that).addClass('cur').siblings('button').removeClass('cur');
							hui.alert('操作成功！');
							targetStatenum = 4;
						}
						if(targetStatenum == 3 && State != result.result){
							hui.closeLoading();
							hui.alert('操作失败！');
						}
						if(targetStatenum < 3){
							targetState(State, that)
							targetStatenum++;
						}
					})
				},4000)
			}
			
			function openSetting() {
				hui.open("account.html", {}, true, {});
				//				hui.open("base_Position.html", {}, true, {});
			}

			/*
			 * 湖南各市基地分类 
			 * */
			var Container_Base = []; // 当前市 基地分类容器

			//基地数据请求
			function getColumns() {
				var userId = localStorage.getItem("loginId");
				var url = newBaseUrl() + "/displaydirectory/getdisplaydirectorylistbyuser?userid=" + userId;
				hui.loading("正在获取数据...");
				
				$.get(url, function(res){
					Container_Base = []; //每次请求数据之前清除上次残留的数据 否则会造成数据异常
					hui.closeLoading();
					localStorage.setItem("columns", JSON.stringify(res.result));
					
					var result = res;
					
					console.log(typeof(res.result))
					
					
					var showFirst = false;
					for(var i = 0; i < result.result.length; i++) { //遍历所有数据 分离新疆  湖南基地
						var d = result.result[i];
						console.log(d)
						if(localStorage.getItem("mapopenstate") == 'true'){
							if(d.deeppath && d.deeppath != ''){
								var DeepPath = d.deeppath.split('/');
								
								//DeepPath 存在两种情况  为空用第二个开始的ID 
								if(DeepPath[0] == '') {
									if(shiJson[DeepPath[1]][DeepPath[2]] == cityName) {
										Container_Base.push(d);
									}
								} else {
									if(shiJson[DeepPath[0]][DeepPath[1]] == cityName) {
										Container_Base.push(d);
									}
								}
							}else{
								Container_Base.push(d);
							}
						}else{
							Container_Base.push(d);
						}	
					}
					
					getCityBase(Container_Base, showFirst); //调用渲染方法
				})	
				
			}

			//各市基地渲染方法
			function getCityBase(CityBase, showFirst) {
				console.log(CityBase);
				localStorage.setItem("basePosition", JSON.stringify(CityBase));
				var xianList = [];
				$.each(CityBase, function(index, value) {
					var d = value;
					if(d.deeppath && d.deeppath != ''){
						var DeepPath = d.deeppath.split('/');
						console.log(DeepPath);
						if(DeepPath.length == 5){
							xianList.push(xianJson[DeepPath[2]][DeepPath[3]]);
						}else if(DeepPath.length == 4){
							xianList.push(shiJson[DeepPath[1]][DeepPath[2]]);
						}
					}else{
						xianList.push('其他')
					}
				})
				
				
				if(localStorage.getItem("mapopenstate") == 'true'){
					$('.shiName').html(cityName + '(' + CityBase.length + ')');
				}else{
					$('.shiName').html(localStorage.getItem("loginName") + '(' + CityBase.length + ')');
				}
				
				xianList = count_same_elements(xianList);
				console.log(JSON.stringify(xianList))
				var qita = {};
				var flag = 0;
				xianList.forEach(function(item, key){
					console.log(item);
					if(item == '其他'){
						flag = 1;
						qita = item;
						xianList.splice(key, 1);
						return false;
					}
				})
				if(flag == 1){
					xianList.push(qita);
					console.log(CityBase);
				}
				
				datas.xianColumns = xianList;
				datas.columns = CityBase;
				
				console.log(datas.xianColumns)
				console.log(JSON.stringify(datas.columns))
				
				
				hui.accordion();
				getSensorList(CityBase[0]);
			}
			var caremaParams = [];
			//获取基地摄像头信息
			function getCameraInfo(column) {
				caremaParams = [];
				localStorage.setItem('detailColumn', JSON.stringify(column));
				if(column.videoList.length != 0 && column.videoList[0].videotype != 'ysyclound'){
					var SerialNo = column.videoList;
					for(var i = 0; i < SerialNo.length; i++) {
						console.log(SerialNo[i])
						caremaParams.push({
							keyWords: SerialNo[i].deviceSerial,
							siteName: SerialNo[i].deviceName,
							summary: SerialNo[i].deviceName,
							title: "cameraIndexCode",
							videoType: "1"
						})
					}
					console.log(caremaParams);
				}
				buttonIF(column.videoList, column.photoList, ''); //调用控制图片及视屏显示方法
			}

			var isOpenCamera = false;
			//打开原生摄像头页面
			function openCamera() {
				
				if(!caremaParams || caremaParams.length == 0) {
					hui.toast("没有可查看的摄像头!")
					return;
				}
				if (isOpenCamera == true){
					return;
				}

				hui.loading("正在打开摄像头");
				var videoStr = JSON.stringify(caremaParams);
				var previewActivity = plus.android.runtimeMainActivity();
				Intent = plus.android.importClass('android.content.Intent');
				var intent = new Intent();
				intent.setClassName('com.sureserve.sensor', 'com.sureserve.sensor.PreviewActivity'); //io.dcloud.PandoraEntry是启动类 在线打包的默认这个
				intent.putExtra("title", datas.Sensor_Name);
				intent.putExtra("videos", videoStr);
				previewActivity.onActivityResult = function(requestCode, resultCode, data) {
					//console.log("摄像窗口关闭返回:" + requestCode + "|" + resultCode);
					isOpenCamera= false;
					hui.closeLoading();
				}
				
				isOpenCamera = true;
				previewActivity.startActivityForResult(intent, 10010); //打开activity
			}

			//指标数据请求
			function getSensorList(column) {
				console.log(column);
				getCameraInfo(column);
				var url = newBaseUrl() + "/displaydirectory/gettargetnewdatabypowerid?powerid=" + column.powerid;
				hui.loading("正在获取数据...");
				
				
				$.get(url, function(res){
					hui.closeLoading();
					console.log(res)
					var result = res;
					datas.accordionList = [column.powername];
					$.each(result.result, function(key,item){
						$.each(column.collectionTargetList, function(index,value){
							if(value.targetcode == item.targetCode){
								value.targetType = item.targetType
								value.targetState = item.targetState
								value.controlState = item.controlState
								value.targetData = item.targetData
								value.updateTime = item.updateTime
								value.targetDataOriginal = item.targetDataOriginal
								value.updateTimeOriginal = item.updateTimeOriginal
							}
						})
						$.each(column.controlTargetList, function(index1,value1){
							if(value1.targetcode == item.targetCode){
								value1.controlState = item.controlState
							}
						})
					})
					datas.list = column.collectionTargetList;
					datas.equipmentList = column.controlTargetList;
				})
			}
	
			$('.Video_Button').on('click', function() {
				$(this).show().addClass('active').siblings('span').removeClass('active');
				$('#swipe_Con').hide();
				$('.ImgNum').hide();
				$('#video_Con').show();
			})
			$('.Img_Button').on('click', function() {
				$(this).show().addClass('active').siblings('span').removeClass('active');
				$('#video_Con').hide();
				$('#swipe_Con').show();
				$('.ImgNum').show();
			})
			$('.Base_Position').on('click', function() {
				hui.open("base_Position.html", {}, true, {});
			})
			$('.Krpano').on('click', function() {
				//hui.open("pano.html?startscene=2&start_hlookat=20&start_vlookat=0&start_fov=90", {}, true, {});
				hui.open("pano.html", {}, true, {});
			})
			//视屏及图片显示控制方法
			function buttonIF(Video, Img, VideoImg) {
				console.log(Video);
				console.log(Img);
				var isCamera = (caremaParams != null && caremaParams.length > 0);
				var isVideo = (Video != null && Video.length != 0) || isCamera;
				var isImg = Img != null && Img.length != 0;
				
				if((Img == null || Img.length == 0) && !isVideo) {
					console.log('无图片 无视频');
					hui('.ImgIndex').html(1);
					//无图片 无视频
					$('#video_Con').hide();
					$('#swipe_Con').show();
					$('.ImgNum').show();
					$('.Video_Button').hide().removeClass('active');
					$('.Img_Button').show().addClass('active');
					mySwiper.removeAllSlides(); //删除所有已存在的slide 重新添加
					for(var i = 0; i < 3; i++) {
						mySwiper.addSlide(i, '<div class="swiper-slide"><img src="img/banner0' + (i + 1) + '.png"></div>'); //在index为1的位置插入一个slide
					}
					hui('.ImgTotal').html(3);
					ImgPreview();
				} else if((Img == null || Img.length == 0) && isVideo) {
					console.log('无图片 有视频');
					$('#swipe_Con').hide();
					$('#video_Con').show();
					$('.ImgNum').hide();
					$('.Video_Button').show().addClass('active');
					$('.Img_Button').hide().removeClass('active');
					VideoIf(Video);
				} else if((Img != null || Img.length != 0) && !isVideo) {
					console.log('有图片 无视频');
					$('#video_Con').hide();
					$('#swipe_Con').show();
					$('.ImgNum').show();
					$('.Video_Button').hide().removeClass('active');
					$('.Img_Button').show().addClass('active');

					//添加图片
					ImgIf(Img);
				} else if((Img != null || Img.length != 0) && isVideo) {
					console.log('有图片 有视频');
					//有图片 有视频
					$('#swipe_Con').hide();
					$('#video_Con').show();
					$('.ImgNum').hide();
					$('.Video_Button').show().addClass('active');
					$('.Img_Button').show().removeClass('active');
					
					//添加视频
					var imgUrl = VideoImg;
					VideoIf(Video);

					//添加图片
					ImgIf(Img);
				}else{
					
				}
			}
			
			//添加图片方法
			function ImgIf(Img) {
				hui('.ImgIndex').html(1);
				//添加图片
				var imgURL = [];
				mySwiper.removeAllSlides(); //删除所有已存在的slide 重新添加
				//循环添加slide
				for(var i = 0; i < Img.length; i++) {
					imgURL.push(newBaseUrl() + Img[i].photourl);
					mySwiper.addSlide(i, '<div class="swiper-slide"><img src="' + newBaseUrl() + Img[i].photourl + '"></div>'); //在index为1的位置插入一个slide
				}
				hui('.ImgTotal').html(imgURL.length);
				ImgPreview();
			}
			//添加视频方法
			function VideoIf(Video, VideoImg, SerialNo, ChannelNo) {
				console.log(Video);
				var isVideo = (Video != null && Video.length != 0);
				var isCamera = (caremaParams != null && caremaParams.length > 0);
				//alert(isCamera + '----' + isVideo);
				$("#play_Button").unbind("click");
				if(isCamera) {
					//有rtsp视频流
					$('#play_Button').on('click', function() {
						//alert('海康');
						openCamera();
					})
				} else{
					if (Video[0].videoimg){
						$('#video_Cover').attr('src', newBaseUrl() + Video[0].videoimg);
					}else{
						$('#video_Cover').attr('src', "img/videoFile.png");
					}
					//添加视频
					if(IsPlay == false) {
						myPlayer.pause(); //暂停
					}
					$('#play_Button').on('click', function() {
						//alert('萤石云');
						localStorage.setItem('videoUrl', Video[0].videourl);
						localStorage.setItem('videoImg', Video[0].videoimg);
						localStorage.setItem('SerialNo', Video[0].videocode);
						localStorage.setItem('ChannelNo', Video[0].videochannel);
						hui.open('video_text.html', {}, true, {});
					})
				}
			}
			
			
			
			function unique1(arr){//数组去重
			  	var hash=[];
			  	for (var i = 0; i < arr.length; i++) {
			  		if(hash.length == 0){
			  			hash.push(arr[i]);
			  		}
			     	if(hash.indexOf(arr[i])==-1){
			      		hash.push(arr[i]);
			     	}
			  	}
			  	return hash;
			}
			function count_same_elements(collection) {
				const obj = {};
				collection.forEach(function(item) {
					if(obj[item]) {
						obj[item].count += 1;
					} else {
						obj[item] = {
							key: item,
							count: 1
						}
					}
				});
				
				var data = [];
				for(var i in obj) {
					 data.push(obj[i])
				}
				return data; //map 方法返回新数组
			}
			
			if(localStorage.getItem("mapopenstate") == 'true'){
				var current = hui.getCView();
				current.close();
			}else{
				var huibackNum = 0;
				hui.Back = function(){
					if(huibackNum < 1) {
						if(localStorage.getItem("loginName") == "元想科技"){
							hui.back();
							return false;
						}
						hui.toast('再按一次退出程序'); 
						//hui.iconToast('操作成功', 'success');
						huibackNum++;
						setTimeout(function() {
							huibackNum = 0;
						}, 3000);
					} else {
						plus.runtime.quit();
					}
				}
			}
			
			
			
		</script>

		<script type="text/javascript">
			function ImgPreview() {
				setTimeout(function() {
					var  objs  =  $(".swiper-container img");              
					for(var  i = 0; i < objs.length; i++)       {       
						objs[i].onclick = function()        {  
							var index = i;
							previewImg(index);     
						}      
					}  
					function previewImg(index) {
						var pswpElement = document.querySelectorAll('.pswp')[0];
						var items = [];
						//获取图片数据并填充近数组
						var  objs  = $(".swiper-container img");                     
						for(var  i = 0; i < objs.length; i++)           {  
							var eimg =  objs[i];            
							var imgObj = {
								src: eimg.getAttribute('src'),
								w: eimg.naturalWidth,
								h: eimg.naturalHeight
							};
							items.push(imgObj);        
						}  
						var options = {
							index: index
						};
						var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
						gallery.init();
					}
				}, 1500);
			}
		</script>

	</body>

</html>